<template>
  <div class="centerbelow">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2" style="height: 10%">
        <span><i class="iconfont icon-align-left"></i></span>
        <span class="fs-xl text mx-2 mb-1" style="font-size: 18px"
          >科室监测</span
        >
      </div>
      <div class="d-flex mt-1 jc-center body-box">
        <dv-scroll-board
          class="dv-scr-board"
          :config="config"
          style="font-size: 30em"
        />
      </div>
    </div>
  </div>
</template>


<script>
import { defineComponent, reactive } from "vue";
export default defineComponent({
  data() {
    return {
      config: {
        header: [
          "科室",
          "在院人数",
          "出院人数",
          "手术量",
          "空床数",
          "床位使用率",
          "17点后接刀数",
          "17点后收急诊数",
        ],
        data: [], // 初始化为空数组，将通过接口获取
        rowNum: 5, //表格行数
        headerHeight: 40,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        index: false,
        columnWidth: [100, 80, 80, 70, 70, 100, 130, 130],
        align: [
          "center",
          "center",
          "center",
          "center",
          "center",
          "center",
          "center",
          "center",
          "center",
        ],
      },
      refreshInterval: null, // 用于存储定时器
      refreshTime: 10*60*1000, // 刷新时间间隔，单位：毫秒（这里设置为30秒）
    };
  },
  methods: {
    // 获取数据的方法
    async fetchData() {
      try {
        // 调用接口获取数据，这里使用axios示例
        const response = await this.$axios.get(
          window.globalConfig.baseApi + "/api/Nurse/GetDeptDataJson"
        );
        const apiData = response.data;

        // 去掉多余的双引号，只保留span标签
        const convertedData = apiData.map((item) => [
          "<span style='font-size:14px;'>" + item.ks + "</span>",
          "<span>" + item.zyrs + "</span>",
          "<span>" + item.cyrs + "</span>",
          "<span>" + item.ssl + "</span>",
          "<span>" + item.kcs + "</span>",
          "<span>" +
            (() => {
              const value = Number(item.cwsyl);
              if (isNaN(value)) return "0%";

              const percentage = value * 100;
              if (Number.isInteger(percentage)) {
                return `${percentage}%`;
              } else {
                return `${percentage.toFixed(2)}%`;
              }
            })() +
            "</span>",
          "<span>" + item.sqdjds + "</span>",
          "<span>" + item.sqdhsjzs + "</span>",
        ]);

        this.config = {
          ...this.config,
          data: convertedData,
        };

        // 可选：打印日志，方便调试
        console.log("数据更新成功", this.config.data);
      } catch (error) {
        console.error("获取数据失败:", error);
        // 可以在这里添加错误处理，如显示错误提示
      }
    },
  },
  created() {
    // 组件创建时立即获取一次数据
    this.fetchData();

    // 设置定时刷新
    this.refreshInterval = setInterval(() => {
      this.fetchData();
    }, this.refreshTime);
  },
  beforeUnmount() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
      this.refreshInterval = null;
    }
  },
});
</script>


<style lang="scss" scoped>
.centerbelow {
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  margin-top: 13px;
  overflow: visible;
  .text {
    color: #c3cbde;
  }
  .body-box {
    overflow: hidden;
    .dv-scr-board {
      width: 98%;
      height: 240px;
    }
  }
}
</style>